export const baseUsage = `
import {PhFlex} from 'phoeon'
interface Flex{
    wrap:{
        type:Boolean,
        default:false //flex-wrap
    },
    row:{
        type:Boolean,
        default:false //flex-direction:row
    },
    col:{
        type:Boolean,
        default:false //flex-direction:column
    },
    flex:{
        type:String //flex: flex-grow flex-shrink flex-basis
    },
    justify:{
        type:String, //justify-content
    },
    items:{
        type:String, //align-items
    },
    padding:{
        type:[String,Number],
    },
    margin:{
        type:[String,Number],
    },
    overflow:{
        type:String
    },
    width:{
        type:String
    },
    height:{
        type:String
    },
    bg:{type:String}
}
`;
export const demo1 = `<ph-flex :col="true" height="300px">
    <ph-flex height="50px" flex="0 0 auto" bg="var(--ph-primary)"></ph-flex>
    <ph-flex bg="var(--ph-success)"></ph-flex>
    <ph-flex bg="var(--ph-danger)"></ph-flex>
    <ph-flex bg="var(--ph-info)"></ph-flex>
    <ph-flex bg="var(--ph-warning)"></ph-flex>
</ph-flex>`;
export const demo2 = `<ph-flex :col="true" height="300px">
    <ph-flex height="50px" flex="0 0 auto" bg="var(--ph-primary)"></ph-flex>
    <ph-flex>
        <ph-flex height="100%" bg="var(--ph-success)"></ph-flex>
        <ph-flex height="100%" bg="var(--ph-danger)"></ph-flex>
        <ph-flex height="100%" bg="var(--ph-info)"></ph-flex>
        <ph-flex height="100%" bg="var(--ph-warning)"></ph-flex>
    </ph-flex>
    <ph-flex height="50px" flex="0 0 auto" bg="var(--ph-primary)"></ph-flex>
</ph-flex>`;
export const demo3 = `<ph-flex :col="true" height="300px">
    <ph-flex height="50px" flex="0 0 auto" bg="var(--ph-primary)"></ph-flex>
    <ph-flex>
        <ph-flex height="100%" bg="var(--ph-success)"></ph-flex>
        <ph-flex height="100%" :col="true">
            <ph-flex bg="var(--ph-danger)"></ph-flex>
            <ph-flex bg="var(--ph-info)"></ph-flex>
        </ph-flex>
        <ph-flex height="100%" bg="var(--ph-warning)"></ph-flex>
    </ph-flex>
    <ph-flex height="50px" flex="0 0 auto" bg="var(--ph-primary)"></ph-flex>
</ph-flex>`;
